<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('电影管理')" ></head>
<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
    $(function(){
        var data4Vue = {
            uri:'categories',
            beans: []
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.list();
            },
            methods: {
                list:function(){
                    var url =  this.uri;
                    axios.get(url).then(function(response) {
                        vue.beans = response.data;
                    });
                }
            }
        });
    });

</script>
<div id="workingArea" >
    <h1 class="label label-info" >电影管理</h1>
</div>
<div align="center">
<form action="">
    <style>
        .table11_6 table {
            width:100%;
            margin:15px 0;
            border:0;
        }
        .table11_6 th {
            background-color:#96C7ED;
            color:#000000
        }
        .table11_6,.table11_6 th,.table11_6 td {
            font-size:0.95em;
            text-align:center;
            padding:4px;
            border-collapse:collapse;
        }
        .table11_6 th,.table11_6 td {
            border: 1px solid #73b4e7;
            border-width:1px 0 1px 0;
            border:2px inset #ffffff;
        }
        .table11_6 tr {
            border: 1px solid #ffffff;
        }
        .table11_6 tr:nth-child(odd){
            background-color:#dcecf9;
        }
        .table11_6 tr:nth-child(even){
            background-color:#ffffff;
        }
    </style>
    <table class=table11_6 width="750">
        <tr>
            <th>mid</th>
            <th>电影名</th>
            <th>类型</th>
            <th>上映时间</th>
            <th>评分</th>
            <th>票房</th>
            <th>操作</th>
        </tr>
        <tr th:each="movie:${movies}">
            <td th:text="${movie.mid}"></td>
            <td th:text="${movie.movie_name}"></td>
            <td th:text="${movie.movie_type}"></td>
            <td th:text="${movie.movie_time}"></td>
            <td th:text="${movie.movie_score}"></td>
            <td th:text="${movie.movie_money}"></td>
            <td>
                <p><a th:href="@{getMovieById(mid=${movie.mid})}">编辑</a></p>
                <p><a th:href="@{'deleteMovieById'+'?mid='+${movie.mid}}">删除</a></p>
            </td>
        </tr>
    </table>
</form>
    <h1><a href="addMoive">添加电影</a></h1>
</div>
<div align="center">
<p>当前 <span th:text="${pageInfo.pageNum}"></span> 页,总 <span th:text="${pageInfo.pages}"></span> 页,共 <span th:text="${pageInfo.total}"></span> 条记录</p>
<a th:href="@{/admin_category_list}">首页</a>
<a th:href="@{/admin_category_list(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a>
<a th:href="@{/admin_category_list(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a>
<a th:href="@{/admin_category_list(pageNum=${pageInfo.pages})}">尾页</a>
</div>
</body>
</html>
